<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!‐‐ 引入ElementUI样式-->
    <link rel="stylesheet" href="../js/index.css">
    <script src="../js/vue.js"></script>
    <!‐‐ 引入ElementUI组件库-->
    <script src="../js/index.js"></script>


</head>
<body>
<div id="app">
    <div class="block">
        <span class="demonstration">直接前往</span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="10"
                layout="total,prev, pager, next, jumper"
                :total="1000">
        </el-pagination>
    </div>
<script>
    new Vue({
        el:'#app',

            methods: {
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                }
            },
            data() {
                return {
                    currentPage1: 5,
                    currentPage2: 5,
                    currentPage3: 5,
                    currentPage4: 4
                };
            }


    });

</script>


</body>
</html>